<template>
  <div calss="container">
    <div>子组件1</div>
    <div class="box">
      子组件1接受父组件传来的数据1：{{ childMsg }}<br />
      子组件1接受父组件传来的数据2：{{ msg2.msg }}<br />
      子组件1接受兄弟组件传来的数据：{{ brother }}<br />
      <button @click="updataMsg">修改父组件传来的数据1</button>
    </div>
  </div>
</template>

<script>
import { eventBus } from "@/brotherBus";
export default {
  // 因为单向数据流的原因，无法在子组件中修改父组件的状态
  // 如果非要往下修改的话:可以使用子父组件传值的方法，改变父组件原来的值
  props: {
    childMsg: {
      type: String, // 限制接受的数据类型
      default: "这是child的默认信息",
    },
    msg2: {
      type: Object,
      required: true,
    },
  },

  data() {
    return {
      brother: "",
    };
  },
  // 计算属性
  computed: {},
  // 方法集合

  // 如果非要往下修改的话: this.$emit() 把修改的数据传递到父组件
  //父级改了,子组件props接收的自然就变了
  methods: {
    updataMsg() {
      this.$emit("updataMsg", "修改父组件传来的数据1--childMsg");
    },
  },
  // 生命周期 - DOM元素渲染前调用
  created() {
    eventBus.$on("brotherTwoMsg", (res) => {
      this.brother = res;
    });
  },
  // 生命周期 - DOM元素渲染后调用
  mounted() {},
  components: {},
};
</script>
<style lang='less' scoped>
.box {
  width: 500px;
  border: 1px solid;
}
</style>
